<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<u-form-item class="diygw-col-24" label="上传图片" prop="upload">
				<u-upload width="160" height="160" maxCount="3" @on-success="uploadUpload" @on-remove="delUpload"
					action="http://26.244.151.47:8800/pet/upload" :file-list="uploadListDatas"> </u-upload>
			</u-form-item>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-16 text-clz"> 发布类型 </view>
				<u-form-item class="diygw-col-24" labelPosition="top" prop="radio">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
						activeColor="#f37b1d" v-model="radio" @change="changeRadio">
						<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radioDatas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-9 text1-clz"> 种类 </view>
				<u-form-item class="diygw-col-23" labelPosition="top" prop="radio1">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
						activeColor="#f37b1d" v-model="radio1" @change="changeRadio1">
						<u-radio class="diygw-col-8" shape="circle" v-for="(radioitem, radioindex) in radio1Datas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view v-if="radio==0">
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="diygw-col-16 text2-clz"> 性别 </view>
					<u-form-item class="diygw-col-24" labelPosition="top" prop="radio2">
						<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
							activeColor="#f37b1d" v-model="radio2" @change="changeRadio2">
							<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radio2Datas"
								:key="radioindex" :name="radioitem.value">
								{{ radioitem.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column">
					<u-form-item class="diygw-col-24" label="宠物名字" prop="input">
						<u-input :focus="inputFocus" class="" placeholder="输入宠物名字" v-model="input"
							type="text"></u-input>
					</u-form-item>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column">
					<u-form-item class="diygw-col-24" label="丢失地址" prop="input1">
						<u-input :focus="input1Focus" class="" placeholder="请输入详细的地址" v-model="input1"
							type="text"></u-input>
					</u-form-item>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column">
					<u-form-item class="diygw-col-24" label="丢失时间" prop="date">
						<u-input @click="showDate = true" class="" placeholder="请选择" v-model="date"
							type="select"></u-input>
						<u-calendar maxDate="2050-12-31" v-model="showDate" mode="date"
							@change="changeDate"></u-calendar>
					</u-form-item>
				</view>
			</view>
			<view v-if="radio==1">
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="diygw-col-9 text2-clz"> 性别 </view>
					<u-form-item class="diygw-col-24" labelPosition="top" prop="radio3">
						<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
							activeColor="#f37b1d" v-model="radio3" @change="changeRadio3">
							<u-radio class="diygw-col-8" shape="circle" v-for="(radioitem, radioindex) in radio3Datas"
								:key="radioindex" :name="radioitem.value">
								{{ radioitem.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column">
					<u-form-item class="diygw-col-24" label="捡到地址" prop="input1">
						<u-input :focus="input1Focus" class="" placeholder="请输入详细的地址" v-model="input1"
							type="text"></u-input>
					</u-form-item>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column">
					<u-form-item class="diygw-col-24" label="捡到时间" prop="date">
						<u-input @click="showDate = true" class="" placeholder="请选择" v-model="date"
							type="select"></u-input>
						<u-calendar maxDate="2050-12-31" v-model="showDate" mode="date"
							@change="changeDate"></u-calendar>
					</u-form-item>
				</view>
			</view>

			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="宠物描述" labelPosition="top" prop="textarea">
					<u-input maxlength="200" height="60px" class="" placeholder="请输入关于宠物的描述..." v-model="textarea"
						type="textarea"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="联系人姓名" prop="input2">
					<u-input :focus="input2Focus" class="" placeholder="请输入联系人姓名" v-model="input2"
						type="text"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="手机号" prop="input3">
					<u-input :focus="input3Focus" class="" placeholder="输入手机号" v-model="input3" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="微信号" prop="input4">
					<u-input :focus="input4Focus" class="" placeholder="输入微信号" v-model="input4" type="text"></u-input>
				</u-form-item>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex12-clz">
			<view class="flex diygw-col-24">
				<button class="diygw-btn orange radius-xl flex-sub margin-xs button-button-clz"
					@click="send(radio)">发布</button>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				uploadListDatas: [],
				uploadDatas: [],
				upload: '',
				radioDatas: [{
						value: '0',
						label: '寻找爱宠',
						checked: true
					},
					{
						value: '1',
						label: '寻找主人',
						checked: false
					}
				],
				radio: '0',
				radio1Datas: [{
						value: '1',
						label: '狗狗',
						checked: true
					},
					{
						value: '2',
						label: '猫咪',
						checked: false
					},
					{
						value: '3',
						label: '其他',
						checked: false
					}
				],
				radio1: '1',
				radio2Datas: [{
						value: '1',
						label: '男孩',
						checked: true
					},
					{
						value: '2',
						label: '女孩',
						checked: false
					}
				],
				radio2: '1',
				radio3Datas: [{
						value: '1',
						label: '男孩',
						checked: true
					},
					{
						value: '2',
						label: '女孩',
						checked: false
					},
					{
						value: '3',
						label: '未知',
						checked: false
					}
				],
				radio3: '1',
				inputFocus: false,
				input: '',
				input1Focus: false,
				input1: '',
				showDate: false,
				date: '',
				textarea: '',
				input2Focus: false,
				input2: '',
				input3Focus: false,
				input3: '',
				input4Focus: false,
				input4: '',
				img:''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			const token = uni.getStorageSync('token');
			if (token) {
				this.setCurrentPage(this);
				if (option) {
					this.setData({
						globalOption: this.getOption(option)
					});
				}

				this.init();
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'error',
					duration: 2000
				});
				uni.switchTab({
					url: '/pages/user/index'
				})
			}
		},
		methods: {
			async init() {},
			changeUpload(lists) {
				console.log(lists[0]['response'])
				this.img = lists[0]['response']
				let datas = lists
					.filter((item) => {
						return item && item.url;
					})
					.map((item) => {
						return item.url;
					});
				this.uploadDatas = datas;
				this.uploadListDatas = datas.map((item) => {
					return {
						url: item
					};
				});
				this.upload = datas.join(',');
			},
			delUpload(index, lists) {
				this.changeUpload(lists);
			},
			uploadUpload(res, index, lists, name) {
				this.changeUpload(lists);
			},
			changeRadio(evt) {},
			changeRadio1(evt) {},
			changeRadio2(evt) {},
			changeRadio3(evt) {},
			changeDate(evt) {
				this.date = evt.result;
			},
			async send(publishType) {
				const address = this.input1
				const image = this.img
				var data = {}
				var publish_data = {}
				var final_data={}
				const name = this.input2
				const petType = this.radio1==1?'狗':this.radio1==2?'猫':'其他'
				const phone = this.input3
				const remark = this.textarea
				const time = this.date + ' 00:00:00'
				const vx = this.input4
				if (publishType == 0) {
					const petName = this.input
					const sex = this.radio2 == 1 ? '男' : '女'
					data = {
						"image": image,
						"address": address,
						"petName": petName,
						"petType": petType,
						"publishType": publishType,
						"remark": remark,
						"sex": sex,
						"time": time,
					}
					publish_data = {	
						"phone": phone,
						"name": name,
						"vx": vx
					}
					final_data = {
						selectpet: {
							...data
						},
						publisher: {
							...publish_data
						}
					}
				} else {
					const sex = this.radio3 == 1 ? '男' : this.radio3 == 2 ? '女' : '未知'
					data = {
						"image": image,
						"address": address,
						// "petName":petName,
						"petType": petType,
						"publishType": publishType,
						"remark": remark,
						"sex": sex,
						"time": time,
					}
					publish_data = {
						"phone": phone,
						"name": name,
						"vx": vx
					}
					final_data = {
						selectpet: {
							...data
						},
						publisher: {
							...publish_data
						}
					}
				}
				const token = uni.getStorageSync('token')
				const header = {
					'content-type': 'application/json;charset=UTF-8',
					"Token": token
				}
				const last_data=JSON.stringify(final_data)
				const http_url = 'publisher-selectpet/saveDetail'
				const result =await this.$http.post(http_url, last_data, header)
				const code = result.code
				if (code == 200) {
					uni.switchTab({
						url:'/pages/index'
					})
					uni.showToast({
						title: '发布成功',
						icon: 'success',
						duration: 2000
					});

				} else {
					uni.showToast({
						title: '发布失败',
						icon: 'error',
						duration: 2000
					});
				}
				console.log(result)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.text-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(66.6666666667% - 30rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text1-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(37.5% - 30rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text2-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(66.6666666667% - 30rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex12-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.button-button-clz {
		margin: 3px !important;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container24934 {}
</style>